<!--components/keyBoard/keyBoard.wxml-->
<template>
  <view id="keyBoard">
    <view class="modal-box">
      <view class="new-text" v-if="carNumArr[7]==''||carNumArr.length==7"><view>新</view>能源</view>
      <view class="modal-wrapper">
        <view class="modal-content" @tap="handleKeyBoard">
          <view class="modal-input">
            <view v-for="(item,index) in 8" :key="index" class="add-box">
              <view
                class="input"
                @tap="inputCarNum(index)"
                :class="selectInputIndex==index?'activeInput':''"
              >
                <text>{{carNumArr[index] || ''}}</text>
              </view>
            </view>
            <view class="line"></view>
          </view>
        </view>
        <!-- 车牌 -->
        <view class="keyboards" v-if="showKeyboard">
          <view class="panel">
            <!-- <view class="button2" bindtap="handleKeyBoardSure">确认</view> -->
            <view class="button1" @tap="handleKeyBoardClose">关闭</view>
          </view>
          <!-- 省键盘 -->
          <view class="provinces" v-if="hiddenPro">
            <view
              class="pro-li fl"
              v-for="(item,index) in provinceArr"
              :key="'key0_'+index"
              @tap="proTap(item)" hover="true" hover-class="detail-hover"
            >{{item}}</view>
          </view>
          <!-- 号码键盘	 -->
          <view class="keyNums" v-if="hiddenStr">
            <view v-if="selectInputIndex==1" class="row numRow">
              <view
                class="pro-li disabled"
                v-for="(item,index) in numArr"
                :key="'key1_'+index"
                @tap="strTap(item)" hover="true" hover-class="detail-hover"
              >{{item}}</view>
            </view>
            <view v-else class="row numRow">
              <view
                class="pro-li"
                v-for="(item,index) in numArr"
                :key="'key1_'+index"
                @tap="strTap(item)" hover="true" hover-class="detail-hover"
              >{{item}}</view>
            </view>
            <view class="strOne row">
              <view
                class="pro-li"
                v-for="(item,index) in strArrOne"
                :key="'key1_'+index"
                @tap="strTap(item)" hover="true" hover-class="detail-hover"
              >{{item}}</view>
            </view>
            <view class="strTwo row">
              <view
                class="pro-li"
                v-for="(item,index) in strArrTwo"
                :key="'key1_'+index"
                @tap="strTap(item)" hover="true" hover-class="detail-hover"
              >{{item}}</view>
            </view>
            <view class="strThree row">
              <view
                class="pro-li"
                v-for="(item,index) in strArrThree"
                :key="'key1_'+index"
                @tap="strTap(item)" hover="true" hover-class="detail-hover"
              >{{item}}</view>
              <view class="kb-icon pro-li" @tap="backSpace">
                <image class="delete-icon" src="../../image/home/del.png" />
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>
<script>
import Taro from "@tarojs/taro";
import "./keyBoard.less";
const INPUT_NUM = 8; //车牌号输入框个数
const EmptyArray = ["豫", "", "", "", "", "", "", ""]; //new Array(INPUT_NUM).fill('');//

// 车牌输入框的下标
const INPUT_INDEX = {
  FIRST: 0,
  SECOND: 1
};
export default {
 
  data() {
    return {
      // 键
      provinceArr: [
        "京",
        "沪",
        "津",
        "苏",
        "粤",
        "冀",
        "晋",
        "蒙",
        "辽",
        "吉",
        "黑",
        "浙",
        "皖",
        "闽",
        "赣",
        "鲁",
        "豫",
        "鄂",
        "湘",
        "桂",
        "琼",
        "渝",
        "川",
        "贵",
        "云",
        "藏",
        "陕",
        "甘",
        "青",
        "宁",
        "新",
        "港",
        "澳",
        "台"
      ],
      strArrOne: ["Q", "W", "E", "R", "T", "Y", "U", "P"],
      strArrTwo: ["A", "S", "D", "F", "G", "H", "J", "K", "L"],
      strArrThree: ["Z", "X", "C", "V", "B", "N", "M"],
      numArr: ["1", "2", "3", "4", "5", "6", "7", "8", "9", "0"],
      hiddenPro: false, // 隐藏省份键盘
      hiddenStr: true, // 隐藏数字字母键盘
      carNumArr: ["豫", "", "", "", "", "", "", ""],
      selectInputIndex: 1,
      btnDisabled: true
    };
  },
  props: {
    showKeyboard: {
      type: Boolean,
      value: false
    },
    resetPlate: {
      type: Array,
      default: function() {
        return ["豫", "", "", "", "", "", "", ""];
      },
      observer: function(newVal) {
        console.log("监听",newVal)
        // your code
        if (newVal.length > 0) {
          this.carNumArr= newVal
        }
      }
    }
  },
  watch:{
    'resetPlate':{
      handler:function(newVal,oldVal){
        console.log(newVal)
        if(newVal[0]==''){
          return
        }
        this.carNumArr=newVal
      }
    }
  },
  created() {
    console.log(this.resetPlate);
  },
  methods: {
    handleKeyBoard() {
      this.showKeyboard = true;
      this.$emit("keyBoardShow", this.showKeyboard)
    },
    handleKeyBoardClose() {
      this.showKeyboard = false;
      this.$emit("keyBoardShow", this.showKeyboard)
    },
    handleKeyBoardSure() {
      this.showKeyboard = this.btnDisabled();
    },
    proTap(e) {
      console.log(e);
      //点击省份
      let province = e;
      //const { carNumArr, selectInputIndex } = this.data;
      this.hiddenPro = true;
      this.hiddenStr = false;
      this.carNumArr[this.selectInputIndex] = province;
      // 选择车牌号时触发
      // 选中一个后，下一个输入框聚焦
      this.selectInputIndex =
        this.selectInputIndex !== this.carNumArr.length - 1
          ? this.selectInputIndex + 1
          : this.selectInputIndex;
      this.hiddenPro = false;
      this.hiddenStr = true;
    },
    strTap(e) {
      //点击字母数字
      const str = e;
      //const { carNumArr, selectInputIndex } = this.data;
      this.carNumArr[this.selectInputIndex] = str;
      // 选中一个后，下一个输入框聚焦
      this.selectInputIndex =
        this.selectInputIndex !== this.carNumArr.length - 1
          ? this.selectInputIndex + 1
          : this.selectInputIndex;

      //this.btnDisabled=this.handleDisabled();
      this.showKeyboard = this.handleDisabled();
      this.onOk();
      // if(this.selectInputIndex>6){
      //   this.triggerEvent("keyBoardShow", this.showKeyboard)
      // }
    },
    inputCarNum(e) {
      this.selectInputIndex = e;
      console.log(e);
      if (e == 0) {
        // 第一个输入框展示省份键盘，第二个展示字母数字输入框(数字不可点),以后就是数字字母输入框(都可点)
        this.hiddenPro = true;
        this.hiddenStr = false;
      } else if (e == 1) {
        this.hiddenPro = false;
        this.hiddenStr = true;
      } else {
        this.hiddenPro = false;
        this.hiddenStr = true;
      }
    },
    backSpace() {
      //删除
      this.carNumArr[this.selectInputIndex] = "";
      this.selectInputIndex =
        this.selectInputIndex !== INPUT_INDEX.FIRST
          ? this.selectInputIndex - 1
          : this.selectInputIndex;
      if (this.selectInputIndex === 0) {
        //这里必须要用this.data.selectInputIndex，用最新的
        this.hiddenPro = true;
        this.hiddenStr = false;
      }
      this.onOk();
    },
    // 只有输入内容的车牌号位数合法时，展示确认按钮
    handleDisabled() {
      // const { carNumArr } = this.data;
      const disabled = this.carNumArr.some((item, index) => {
        if (index !== this.carNumArr.length - 1) {
          return !item;
        }
        return false;
      });
      return disabled;
    },
    onCancel() {
      this.carNumArr = EmptyArray;
      this.$emit("onCancel");
    },
    onOk() {
      const carNum = this.carNumArr.join("");
      console.log(carNum);
      this.$emit("onOk", carNum);
    }
  }
};
</script>